<!--
 * @Author: 'Chenfarry' '2925102113@qq.com'
 * @Date: 2024-07-31 17:32:27
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2024-10-06 17:15:51
 * @FilePath: \orderApp\components\cu-login\cu-login.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="accountBox">
    <image class="accountBox-bg" :src="baseIMGURL+'login-bg.png'" mode="widthFix"></image>
    <view class="accountBox-title">
      <p>{{ title }}</p>
      <p>{{ subTit }}</p>
    </view>
    <view class="accountBox-content">
      <slot></slot>
    </view>
  </view>
</template>

<script setup lang="ts">
// 图片基地址
const baseIMGURL = import.meta.env.VITE_IMG_BASEURL;
import { useRouter } from 'vue-router'

const router = useRouter()

const props = defineProps({
  title: {
    type: String,
    default: '你好！欢迎使用',
  },
  subTit: {
    type: String,
    default: '鸿博智成点评点餐系统',
  },
})
</script>

<style lang="scss" scoped>
.accountBox {
  width: 100%;
  height: 100vh;
  position: relative;
  background-color: #fff;

  &-bg {
    width: 100%;
    position: absolute;
    // top: 0;
  }

  &-title {
    top: 288rpx;
    position: absolute;
    color: #fff;
    font-family: 'PingFang SC-Semibold';
    font-size: 54rpx;
    font-weight: 400;
    padding: 0 46rpx;
    span {
      display: block;
      padding-left: 48rpx;
      box-sizing: border-box;
    }
  }

  &-content {
    width: 100%;
    height: calc(100vh - 460rpx);
    position: absolute;
    padding: 76rpx 46rpx 0 46rpx;
    background-color: #fff;
    border-top-right-radius: 30rpx;
    border-top-left-radius: 30rpx;
    margin-top: 460rpx;
    box-sizing: border-box;
    &-btn {
      margin-top: 128rpx;
    }
  }
}

.bottomBox {
  font-weight: 400;
  font-size: 27rpx;
  color: #00754a;
  line-height: 42rpx;
  position: absolute;
  bottom: 80rpx;
  left: 50%;
  transform: translateX(-50%);
  & :nth-child(2) {
    margin: 0 30rpx;
  }
}
</style>
